<template>
	<main class="divide">
		<el-tabs type="border-card" >
		  	<el-tab-pane label="分组情况">
		  		<el-card class="box-card" v-for="(item,index) in groupList">
					<div slot="header" class="clearfix">
					    <span>{{item.gname}}</span>
					    <!--<el-button style="float: right; padding: 3px 0" type="text" @click="changeGroupMenber">编辑</el-button>-->
					</div>
					<el-table :data="tableData" height="250" border >
					    <el-table-column prop="uname" label="姓名" width="180"></el-table-column>
					    <el-table-column prop="usex" label="性别" width="180"></el-table-column>
					    <el-table-column prop="sid" label="专业方向" width="180"></el-table-column>
					    <el-table-column  prop="uphone" label="联系电话"></el-table-column>
					    <el-table-column  prop="gname" label="隶属小组"></el-table-column>
					    <el-table-column  prop="utype" label="组内职务"></el-table-column>
					</el-table>
				</el-card>
		  	</el-tab-pane>
		  	<el-tab-pane label="分组管理">
		  		分组管理
		  	</el-tab-pane>
		</el-tabs>
	</main>
</template>

<script>
	export default {
    data() {
    	return {
    		groupList:[
	    		{
	    			gname:"我是组名1",
	    		},
	    		{
	    			gname:"我是组名2",
	    		},
	    		{
	    			gname:"我是组名3",
	    		},
	    		{
	    			gname:"我是组名4",
	    		},
	    		{
	    			gname:"我是组名5",
	    		}
    		],
    		tableData: [
    			{
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:2,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组长',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:3,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:4,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:5,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:6,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        }
		        
		        
		    ]
    	}
    },
    methods:{
//  	changeGroupMenber(){
//  		alert('我要跳转了')
//  	}
    }
   }
</script>

<style>
	.divide{
		width:88%;
	}
	.divide .text {
    	font-size: 14px;
	}
	
	.divide .item {
	    margin-bottom: 18px;
	}
	
	.divide .clearfix:before,
	.divide .clearfix:after {
	    display: table;
	    content: "";
	}
	.divide .clearfix:after {
	    clear: both
	}
</style>